<template>
  <div class="flow">
    <div class="formLook" style="background: #f1f2f4">
      <!-- 返回按钮 -->
      <div class="employee-card">
        <div class="header">
          <TitleComponent title="转正申请"/>
        </div>
        <div class="employee-avatar">
          <ImageComponent :src='userInfoForm.personPhoto' width="100px" height="100px" borderRadius="6px" />
        </div>

        <el-form label-width="100px" size="small" style="margin-left: 12px">
          <div class="section-title">
            <span>基本信息</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="员工账号：">
                <span>{{ userInfoForm.userName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工号：">
                <span>{{ userInfoForm.jobNumber }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话：">
                <span>{{ userInfoForm.phoneNumber }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工作邮箱：">
                <span>{{ userInfoForm.mail }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="岗位名称：">
                <span>{{ userInfoForm.applicationPositonName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="岗位性质：">
                <span>{{ userInfoForm.jobNature }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="部门：">
                <span>{{ userInfoForm.deptName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职级：">
                <!-- <span>{{ userInfoForm.positionLevel }}</span> -->
                <span>{{ positionLevelLabel }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="直属领导：">
                <span>{{ userInfoForm.directLeaderName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="最高领导：">
                <span>{{ userInfoForm.supremeLeaderName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="入职日期：">
                <span>{{ userInfoForm.becomeJoinTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="转正日期：">
                <span>{{ userInfoForm.applyTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 申请流程表单 -->
      <div class="application-form">
        <div style='margin-left: 10px;'>
          <span>申请流程</span>
        </div>
        <el-divider class="custom-divider" />
        <el-form
          ref="formRef"
          :model="userInfoForm"
          :rules="rules"
          label-width="120px"
          label-position="top"
          style="margin-left: 10px"
        >
          <el-form-item label="申请日期：" prop="applyTime">
            <el-date-picker
              v-model="userInfoForm.applyTime"
              type="date"
              placeholder="请选择"
              style="width: 20%"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="转正申请说明：" prop="applyDesc">
            <el-input
              v-model="userInfoForm.applyDesc"
              type="textarea"
              :maxlength="300"
              placeholder="请输入"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="试用期工作成绩：" prop="workCondition">
            <el-input
              v-model="userInfoForm.workCondition"
              type="textarea"
              :maxlength="300"
              placeholder="请输入"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="试用期存在的问题及改进设想：" prop="idea">
            <el-input
              v-model="userInfoForm.idea"
              type="textarea"
              :maxlength="300"
              placeholder="请输入"
              show-word-limit
            ></el-input>
          </el-form-item>

          <!-- 按钮 -->
          <div class="button-group">
            <el-button @click="resetForm">取消</el-button>
            <el-button @click="save">保存</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import ImageComponent from "@/components/ImageComponent.vue";
import { reactive, ref } from "vue";
import { regularInfo, regularApply } from "@/api/employeeRelations/regular.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import TitleComponent from "@/components/TitleComponent.vue";
import { flowableTodo } from "@/api/flowableApi/flowableApi.js";
import useUserStore from "@/store/modules/user.js";
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const user = useUserStore().user;
const taskId = ref("接口取值");
const flowableTodoData = ref([]);
const userInfoForm = reactive({
  id: "",
  name: "", //姓名
  // sex: "", //性别
  phoneNumber: "", //联系电话
  mail: "", //邮箱
  userName: "", //员工账号
  jobNumber: "", //工号
  deptId: "", //任职部门id
  deptName: "", //任职部门名称
  positionLevel: "", //职级
  applicationPositonName: "", //岗位名称
  jobNature: "", //岗位性质
  directLeaderId: "", //直属领导id
  directLeaderName: "", //直属领导名称
  supremeLeaderId: "", //最高领导id
  supremeLeaderName: "", //最高领导名称
  joinType: "", //入职类型
  // socialSecurityScheme: "", //社保方案
  applicationSource: "", //应聘渠道
  salaryScale: "", //薪资标准
  otherSubsidy: "", //其他补贴
  // remark: "", //备注
  file: "", //附件
  applyTime: "", //转正申请日期
  applyDesc: "", //转正申请说明
  workCondition: "", //试用期工作成绩
  idea: "", //试用期存在的问题及改进设想
  status:
    "" /** 状态 0预入职，1入职审批中，2入职完成，3转正审批中，4转正完成，5取消入职 6取消转正*/,
  becomeJoinTime: "", //入职日期
});

const rules = reactive({
  applyTime: [{ required: true, message: "请选择申请日期", trigger: "change" }],
  applyDesc: [
    { required: true, message: "请输入转正申请说明", trigger: "blur" },
  ],
  workCondition: [
    { required: true, message: "请输入试用期工作成绩", trigger: "blur" },
  ],
  idea: [
    {
      required: true,
      message: "请输入试用期存在的问题及改进设想",
      trigger: "blur",
    },
  ],
});
const levelMap = {
  0: "初级",
  1: "中级",
  2: "高级",
};
const positionLevelLabel = computed(
  () => levelMap[userInfoForm.positionLevel] || ""
);
const formRef = ref(null);

onMounted(async () => {
  if (route.query.id) {
    getInfo(route.query.id);
  }
});

const getInfo = (id) => {
  let processId = null;

  regularInfo(id).then(async (res) => {
    if (res.data) {
      Object.keys(res.data).forEach((item) => {
        if (res.data[item]) {
          userInfoForm[item] = res.data[item];
        }

        processId = res.data.processId;
        console.log(processId, "processIdprocessId");
      });
    }
    let params = {
      owner: user.userId,
      role: user.userId,
      flowKey: "BECOME_MANAGEMENT",
    };
    console.log(res.data, "res.data");
    if (res.data.processId) {
      const todoRes = await flowableTodo(res.data.processId, params);
      console.log(todoRes, "todoRestodoRestodoRes");
      if (todoRes.data.length > 0) {
        // 审批
        // flowableBtns.value = JSON.parse(todoRes.data[0].description)[0].btns;
        console.log(todoRes.data[0], "todoRes.data[0]");
        flowableTodoData.value = todoRes.data[0];
        console.log(todoRes.data[0], "todoRes.data[0]");
        console.log(flowableTodoData.value, "flowableTodoData.value");
        taskId.value = todoRes.data[0].taskId;
      }
    }
  });
};

const message = (text) => {
  ElMessageBox.confirm(`是否要${text}这条转正申请?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      if (text == "保存") {
        userInfoForm.type = "0";
        userInfoForm.taskId = flowableTodoData.value.taskId;
      } else {
        userInfoForm.type = "1";
        userInfoForm.flowKey = "BECOME_MANAGEMENT";
        userInfoForm.taskId = flowableTodoData.value.taskId;
      }

      console.log(flowableTodoData);
      console.log(flowableTodoData.value);
      if (flowableTodoData.value.taskId) {
        userInfoForm.taskId = flowableTodoData.value.taskId;
      } else {
        userInfoForm.taskId = "1";
      }
      userInfoForm.id = route.query.id || null;

      regularApply(userInfoForm).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: `${text}成功`,
          });
          resetForm();
        } else {
          ElMessage({
            type: "error",
            message: `${text}失败`,
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

const save = () => {
  message("保存");
};

const submit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // ElMessage.success("提交成功");
      message("提交");
    } else {
      ElMessage.error("请填写转正信息");
      return false;
    }
  });
};

const resetForm = () => {
  formRef.value.resetFields();

  router.go(-1);
};
</script>

<style scoped>
.back-button {
  margin-bottom: 20px;
}

.employee-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-top: 1px;
  margin-bottom: 10px;
}

.employee-avatar {
  /* text-align: center; */
  text-align: left;
  margin-bottom: 20px;
  margin-top: 20px;
}

.custom-divider {
  margin: 12px 0 24px;
  border-color: #ebeef5;
}

.application-form {
  background-color: #fff;
  border-radius: 8px;
  /* margin-left: 12px; */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-top: 20px;
}

.button-group {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-form-item__label) {
  font-weight: bold;
  color: #606266;
  padding-bottom: 5px;
}

:deep(.el-textarea__inner) {
  resize: none;
  border-radius: 4px !important;
}
.section-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
  color: #16191d;
}

.button-group {
  margin-top: 38px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
</style>
